<template>
	<div id="app">
		<div>
			<!-- 三个点      是否显示           点击三个点时，触发事件-->
			<x-header @on-click-title='$router.replace("/")' >conde移动端社区
				<div slot='right' @click='showMoreMenus'>
					<a class="vux-header-more"></a>
					<Badge :text='datalist' style="margin-left: 5px;"></Badge>
				</div>
			</x-header>
			<!-- 显示小点中的内容   动态绑定事件   是否显示当前元素   点击菜单时触发  -->
			<actionsheet  :menus='moreMenus' v-model='isSHow' @on-click-menu='handelClickMoreMenu'></actionsheet>
			<tab>
				<!-- tab切换导航  vux组件中的内容   selected 是让默认选中第一个      @onxxx的是点击时，触发的事件，传递当前下标-->
				<tab-item v-for="(i,index) in topics" :key='index' :selected='$route.path=="/topiclist/"+i.name' @on-item-click='Tab(index)'>
					{{i.desc}}
				</tab-item>
			</tab>
		</div>
		<router-view></router-view>
		<vm-back-top></vm-back-top>
	</div>
</template>

<script>
	// 局部注册vux组件
	import { //引入
		XHeader,
		Actionsheet,
		Tab,
		TabItem,
		Badge
	} from 'vux'
	//导入数组展开对象
	import {mapState,mapGetters,mapMutations} from 'vuex';
	import VmBackTop from 'vue-multiple-back-top'
	export default {
		name: 'app',
		components: { //注册
			VmBackTop,
			XHeader,
			Actionsheet,
			Tab,
			TabItem,
			Badge
		},
		data:function(){
			return{
				datalist:''
			}
		},
		//组件创建完成后获取本地数据，
		created:function(){
			var loginstatus=window.localStorage.getItem('loginstatus');
			var loginname=window.localStorage.getItem('loginname');
			var accesstoken=window.localStorage.getItem('accesstoken');
			var author_id=window.localStorage.getItem('author')
			//把数据写入vuex中
			if(loginstatus){
				//修改登录状态
				this.mutationlogin(true);
				//修改登录名
				this.mutationloginname(loginname);
				//修改token值
				this.mutationtoken(accesstoken);
				//修改用户id
				this.mutationAuthor(author_id);
			}
			this.getu();
			//调用未读消息函数
			var app=this;
			setInterval(function(){//这里的函数是window函数，所以指向有问题
				this.getu();
			},1000*30);
			
		},
		computed:{
			//使用辅助函数 调用数据仓库中的函数
			...mapState(['isSHow','topics','loginedMoerMenus','unloginedMoerMenus','isLoginde']),
			...mapGetters(['moreMenus','']),
			//action菜单显示
			isSHow:{
				set:function(nav){
					//调用mutations函数，修改actionsheet的显示状态
					this.$store.commit('mutationIsShowMoreMens',nav)
				},
				get:function(){
					return this.$store.state.isSHow;
				}
			}
		},
		methods: {
			...mapMutations(['mutationlogin','mutationloginname','mutationtoken','mutationAuthor']),
			//点击路由时，实现路由跳转
			Tab: function(index) {
				//编程式路由跳转
				console.log(this.topics[index].name);
				this.$router.push('/topiclist/' + this.topics[index].name);
			},
			
			//点击三个点时，显示actionsheet菜单
			showMoreMenus:function(){
				//点击时，切换显示
				 this.isSHow=true;
			},
			//点击 actionsheet时，回调函数
			handelClickMoreMenu(menukey,menui){
				// console.log(menukey);
				// console.log(menui);
				//跳转到对应页面，路由跳转
				this.$router.push('/'+menukey);//编程式路由调转，参数就是
			},
			//发送ajax请求获取服务器端未读消息的个数
			getu:function(){
				var app=this;
				this.$http.get('/message/count',{
					params:{
						accesstoken:this.$store.state.acctoken
					}
				}).then(function(res){
					app.datalist=res.data.data;
				})
			}
		},
	}
</script>

<style lang="less">
	@import '~vux/src/styles/reset.less';

	body {
		background-color: #fbf9fe;
			}
</style>
